<template>
  <div
    class="m-card"
    :class="{
      shadow: showShadow,
    }"
  >
    <div class="p-20">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MCard',
  props: {
    showShadow: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style lang="scss" scoped>
.m-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  &.shadow {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
